<template>
	<view class="unit-box">
		<view class="search">
			<view class="search-radius">
				<u-icon name="search" color="#D1D1D1" size="28"></u-icon>
				<u-input placeholder="输入单元编号" type="text" v-model="keywords"/>
				<button type="default" size="mini" @click="getQueryUnits(floorId,communityId,keywords)">搜索</button>
			</view>
		</view>
		<view class="content-box">
			<cell :bg_url="1" v-for="item in unitInfo" :key="item.unitId" @click.native="_navBack(item)">
				<text slot="name">{{item.unitNum}}单元</text>
			</cell>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import Cell from '@/components/location/location.vue' //位置内容
	import {
		getQueryUnits
	} from '@/api/common.js'
	export default {
		components: {
			Cell
		},
		data() {
			return {
				unitInfo: [],
				floorId:'',
				communityId:'',
				keywords:'' //搜索关键词
			}
		},

		onLoad(option) {
			console.log(option)
			this.floorId = option.floorId
			this.communityId = option.communityId
			this.getQueryUnits(this.floorId, this.communityId,this.keywords)
		},
		methods: {
			_navBack(row) {
				let object = {
					unitId: row.unitId,
					unitName: row.unitNum + '单元',
				}
				let pages = getCurrentPages(); //获取所有页面
				let prevPage = pages[pages.length - 2] //获取上级页面
				prevPage.$vm.unitFun(object);
				uni.navigateBack();
			},
			getQueryUnits(floorId, communityId,keywords) {
				const data = {
					page: '1',
					row: '20',
					communityId,
					floorId,
					unitNum: keywords,
				}
				getQueryUnits(data).then(res => {
					if (res.length != 0) {
						this.unitInfo = res
					} else {
						return uni.showToast({
							title: '该楼栋没有单元',
							icon: 'error',
							mask: true
						})
					}
				})
			}

		}
	}
</script>

<style lang="scss">
	.unit-box {
		background-color: #fff;
		.search {
			width: 100%;
			padding: 24rpx;

			.search-radius {
				display: flex;
				justify-content: space-between;
				border-radius: 8rpx;
				background: #F3F3F3;
				overflow: hidden;

				u-icon {
					width: 66rpx;

					view {
						margin: 0 auto;
					}
				}

				u-input {
					flex: 1;
				}

				button {
					// width: 130rpx;
					margin: 0;
					background: #1585FC;
					color: #FFFFFF;
					font-family: SourceHanSansCN-Medium, SourceHanSansCN;
					font-weight: 500;
					border-radius: 0;
					line-height: 64rpx !important;
				}

				button:after {
					border-radius: 0;
				}
			}

		}

		.content-box {
			padding: 0 36rpx;
			width: 100%;
		}
	}
</style>
